Skip to content

fix(ui): invitations/org surfaces polish — app-level nudge, toolbar slot, card rhythm#4301

Merged
PierreBrisorgueil merged 7 commits into
masterfrom
fix/ui-feedback-invitations
Jun 12, 2026
Merged

fix(ui): invitations/org surfaces polish — app-level nudge, toolbar slot, card rhythm#4301
PierreBrisorgueil merged 7 commits into
masterfrom
fix/ui-feedback-invitations

Conversation

@PierreBrisorgueil

@PierreBrisorgueil PierreBrisorgueil commented Jun 12, 2026

Copy link
Copy Markdown
Collaborator

User-feedback UI polish (epic #3808 surfaces, tested live 2026-06-11)

  1. App-level pending-invitations nudge — centered snackbar right after login (once per session, re-arms on re-login) with a View → My Organizations action; replaces the page-local toast. Then merged with the suggested-join banner into ONE component (organizations.loginNotices.component.vue, mounted once in app.vue) per follow-up feedback — 21 merged tests, both old components deleted.
  2. #toolbar slot on the core datatable (named toolbaractions would collide with the dynamic per-row slots): card-title actions land left of the search field. Add-member button moved inside the members card (no more layout shift; the two org cards align). e2e selector org-add-member-open preserved.
  3. 12px card rhythm on the org general tab (mt-4mt-3 on Pending Requests + Roles & Permissions) matching the grid gutter.
  4. Admin Invitations button inside the card top-right via the same #toolbar slot + harmonized with the add-member reference (tonal variant, MD3 typography, sized icon).

Zero custom CSS (Vuetify utilities + props only), FA icons. Lint clean, build green, all touched suites green (the 2 billing snapshots fail locally only — Vuetify drift, green in CI).

Sibling issues filed from the same feedback: #4296 (activity tab search/actions), #4297 (mailer banner → readiness), Node#3836 (readiness badge analysis).

Part of #3808.

Summary by CodeRabbit

  • New Features

    • Post-login notices for suggested workspace invitations and pending team invitations with action prompts.
  • Improvements

    • Enhanced datatable interface with dedicated toolbar area for card-level actions.
    • Relocated invite and member management buttons to datatable toolbar for improved accessibility.
    • Refined vertical spacing in organization settings interface.

…ite buttons into the card title

Adds an optional named #toolbar slot to core.datatable.component between the
title spacer and the search field (named toolbar, not actions, to avoid
colliding with the dynamic per-row slots resolved via header.slotName ||
header.value). Members tab: the Add member button moves from its own row
above the card into the toolbar slot, fixing the misalignment with the
Details card (data-test org-add-member-open preserved for e2e). Admin
Invitations: the Invite button moves into the same slot (top-right of the
card, no search on that table) like other admin tabs.
New organizations.pendingInvitationsNudge component mounted in app.vue next
to the suggested-join banner: on login (watch isLoggedIn, immediate, once
per session) it fetches the user's pending owner_add invitations and shows
a centered snackbar (location=center, 8s) with a View action routing to
/users/organizations. Replaces the page-local nudge in
user.organizations.view (which only showed if the invitee happened to visit
My Organizations); the persistent pending list there stays the durable
surface. Logout re-arms the nudge for the next session; accepting an
invitation drains the shared store list and hides it automatically.
…d gutter

mt-4 (16px) -> mt-3 (12px) on the Pending Join Requests and
Roles & Permissions cards so the vertical card gaps match the 12px
row/column gutter rhythm.
Copilot AI review requested due to automatic review settings June 12, 2026 06:56
@coderabbitai

coderabbitai Bot commented Jun 12, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@PierreBrisorgueil, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 46 minutes and 8 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more credits in the billing tab to continue.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 2acb849a-9901-4299-8c31-44ac9a0ac980

📥 Commits

Reviewing files that changed from the base of the PR and between 8c89307 and ba104eb.

📒 Files selected for processing (2)
  • src/modules/organizations/components/organizations.loginNotices.component.vue
  • src/modules/organizations/tests/organizations.loginNotices.component.unit.tests.js

Walkthrough

This PR consolidates post-login user feedback surfaces by introducing a toolbar slot pattern for datatable action buttons, unifying suggested-join and pending-invitations nudges into a single component, and removing the legacy component-local nudge from UserOrganizationsView. The refactoring updates the root app component and multiple feature modules.

Changes

Post-login nudge consolidation and toolbar slot pattern

Layer / File(s) Summary
CoreDataTable toolbar slot introduction
src/modules/core/components/core.datatable.component.vue, src/modules/core/tests/core.datatable.component.unit.tests.js, src/modules/invitations/tests/invitations.admin.view.unit.tests.js, src/modules/organizations/tests/organizations.members.component.unit.tests.js
Adds a new named #toolbar slot to the datatable's card header for action buttons, positioned between title and search field. Test stubs and test cases are updated to render and validate the slot.
OrganizationsLoginNotices unified component
src/modules/organizations/components/organizations.loginNotices.component.vue, src/modules/organizations/tests/organizations.loginNotices.component.unit.tests.js
New component consolidates suggested-workspace join prompts and pending-invitations nudges into two coordinated snackbars. Implements benign error classification (404, known terminal messages), session-scoped pending-invitation fetch, double-submit guards, and differentiated toast feedback. Includes comprehensive test coverage for success, benign rejection, error, dismissal, and loading-state paths.
Toolbar slot adoption in consumer components
src/modules/invitations/views/invitations.admin.view.vue, src/modules/organizations/components/organizations.members.component.vue
Moves "Invite" and "Add member" action buttons from external right-aligned containers into the CoreDataTable's #toolbar slot, updating button styling while preserving click handlers and permission gates.
Legacy nudge UI cleanup from UserOrganizationsView
src/modules/users/views/user.organizations.view.vue, src/modules/users/tests/user.organizations.view.unit.tests.js
Removes component-local pending-invitations snackbar and related nudge data state. Shifts nudge responsibility to app-level OrganizationsLoginNotices. Updates unit tests to remove nudge assertions and expand acceptInvitation post-accept token refresh coverage.
App-level component registration swap
src/modules/app/app.vue
Replaces OrganizationsSuggestedJoinBanner with OrganizationsLoginNotices in import, template rendering, and component registration.
Minor vertical spacing refinements
src/modules/organizations/components/organization.general.tab.vue
Reduces top margin of "Roles & Permissions" and "Pending Join Requests" cards from mt-4 to mt-3.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • pierreb-devkit/Vue#3927: Updates organizations.members.component.vue to align with refactored UserAvatarComponent API changes.
  • pierreb-devkit/Vue#4288: Adds pendingInvitations store state/actions that this PR depends on for the nudge visibility and dismissal logic.

Suggested labels

Fix, Tests

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main changes: app-level nudge, toolbar slot, and card rhythm polish across invitations and organization surfaces.
Description check ✅ Passed The description covers most required sections (summary, scope, validation steps) but lacks the explicit Before/After comparison table and some optional infra details. Core information is present and comprehensive.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/ui-feedback-invitations

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov

codecov Bot commented Jun 12, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.58%. Comparing base (d977558) to head (ba104eb).
⚠️ Report is 3 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #4301   +/-   ##
=======================================
  Coverage   99.58%   99.58%           
=======================================
  Files          32       32           
  Lines        1219     1219           
  Branches      360      360           
=======================================
  Hits         1214     1214           
  Misses          5        5           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR consolidates post-login organization notices into a single app-level component and polishes organization/admin surfaces by standardizing card-title actions via a new coreDataTableComponent #toolbar slot.

Changes:

  • Replace page-local pending-invitations snackbar + suggested-join banner with a unified app-level organizations.loginNotices component mounted in app.vue.
  • Add #toolbar slot support to core.datatable.component and migrate “Add member” / “Invite” actions into the datatable card title.
  • Adjust organization general-tab card spacing (mt-4mt-3) for consistent rhythm.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
src/modules/users/views/user.organizations.view.vue Removes component-local login nudge; relies on app-level notices + shared pending-invitations store state.
src/modules/users/tests/user.organizations.view.unit.tests.js Drops tests that asserted the old view-local nudge behavior.
src/modules/organizations/components/organizations.suggestedJoinBanner.component.vue Deletes the standalone suggested-join banner (replaced by consolidated login notices).
src/modules/organizations/tests/organizations.suggestedJoinBanner.component.unit.tests.js Removes unit tests for the deleted suggested-join banner.
src/modules/organizations/components/organizations.loginNotices.component.vue Adds unified app-level login notices (suggested join + pending-invitations nudge).
src/modules/organizations/tests/organizations.loginNotices.component.unit.tests.js Adds unit tests for the unified login notices behaviors.
src/modules/core/components/core.datatable.component.vue Adds #toolbar slot inside v-card-title to host card-level actions.
src/modules/core/tests/core.datatable.component.unit.tests.js Adds tests for #toolbar slot rendering and non-collision with row #actions.
src/modules/organizations/components/organizations.members.component.vue Moves “Add member” into the datatable card-title toolbar slot for alignment.
src/modules/organizations/tests/organizations.members.component.unit.tests.js Updates datatable stub to render the new #toolbar slot.
src/modules/invitations/views/invitations.admin.view.vue Moves “Invite” button into datatable toolbar slot for consistent admin layout.
src/modules/invitations/tests/invitations.admin.view.unit.tests.js Updates datatable stub to render #toolbar slot.
src/modules/organizations/components/organization.general.tab.vue Adjusts card spacing (mt-3) for consistent vertical rhythm.
src/modules/app/app.vue Mounts organizationsLoginNotices at the app level (replacing suggested-join banner).

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/modules/app/app.vue`:
- Line 39: The app core is directly referencing the optional component
organizationsLoginNotices (and similar optional components at the same
locations), violating the core-module boundary; remove direct imports/usage of
organizationsLoginNotices from the App component and instead render it via the
optional-module self-registration mechanism (e.g., resolve or lookup a
registered optional component by name at runtime or use a plugin-provided
dynamic placeholder), so the core does not hard-code the optional module name;
update App.vue to call the dynamic resolver/placeholder API used by optional
modules and ensure organizations module self-registers that component under the
agreed name (organizationsLoginNotices) so it appears when present.

In
`@src/modules/organizations/components/organizations.loginNotices.component.vue`:
- Around line 135-162: Add a JSDoc block above the component's data function
describing its purpose (one-line summary) and include an `@returns` tag that
documents the returned reactive state object (describe keys: suggested with
visible:boolean, loading:boolean,
feedback:{visible:boolean,color:string,text:string}, and nudge with
announced:boolean,dismissed:boolean). Keep the header concise, include no `@param`
since data takes no args, and ensure the JSDoc is placed immediately above the
data() declaration.
- Around line 211-214: The async watcher handler for isLoggedIn (the async
function named handler in the watcher definition) lacks a JSDoc `@returns`; update
the JSDoc for that handler to include a `@returns` annotation indicating the async
return type (e.g. `@returns` {Promise<void>} or the actual Promise<T> if it
returns a value). Locate the isLoggedIn watcher and its handler and add the
matching `@returns` line so it complies with the async function documentation
guideline.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: a763fb92-aefa-4eac-960e-cdebb24167bc

📥 Commits

Reviewing files that changed from the base of the PR and between 13abb45 and 8c89307.

📒 Files selected for processing (14)
  • src/modules/app/app.vue
  • src/modules/core/components/core.datatable.component.vue
  • src/modules/core/tests/core.datatable.component.unit.tests.js
  • src/modules/invitations/tests/invitations.admin.view.unit.tests.js
  • src/modules/invitations/views/invitations.admin.view.vue
  • src/modules/organizations/components/organization.general.tab.vue
  • src/modules/organizations/components/organizations.loginNotices.component.vue
  • src/modules/organizations/components/organizations.members.component.vue
  • src/modules/organizations/components/organizations.suggestedJoinBanner.component.vue
  • src/modules/organizations/tests/organizations.loginNotices.component.unit.tests.js
  • src/modules/organizations/tests/organizations.members.component.unit.tests.js
  • src/modules/organizations/tests/organizations.suggestedJoinBanner.component.unit.tests.js
  • src/modules/users/tests/user.organizations.view.unit.tests.js
  • src/modules/users/views/user.organizations.view.vue
💤 Files with no reviewable changes (3)
  • src/modules/organizations/tests/organizations.suggestedJoinBanner.component.unit.tests.js
  • src/modules/organizations/components/organizations.suggestedJoinBanner.component.vue
  • src/modules/users/tests/user.organizations.view.unit.tests.js

Comment thread src/modules/app/app.vue
The component imports config directly from @/config to gate the nudge
fetch on config.organizations. Without mocking this path, a clean
checkout without the generated src/config/index.js can fail to import
the SFC and the nudge logic is silently skipped. Mock is self-contained
and shares the same shape as the lib/services/config mock already present.
…andler

Add function-level JSDoc with @returns to the data() function describing
the reactive state shape, and add @returns {Promise<void>} to the async
isLoggedIn watcher handler — both required by the project JSDoc rule
(every function must document @returns, mandatory on async functions).
@PierreBrisorgueil

Copy link
Copy Markdown
Collaborator Author

@coderabbitai resolve

@coderabbitai

coderabbitai Bot commented Jun 12, 2026

Copy link
Copy Markdown
✅ Action performed

Comments resolved and changes approved.

@PierreBrisorgueil PierreBrisorgueil merged commit d203d84 into master Jun 12, 2026
7 checks passed
@PierreBrisorgueil PierreBrisorgueil deleted the fix/ui-feedback-invitations branch June 12, 2026 07:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants